<template>
	<div>
		<a-card>
			<a-button type="primary" @click="handleAddAdmin">添加管理员</a-button><br>
			<span>
				<a-input-search placeholder="请输入你要查询的管理员的姓名" style="width: 300px" @search="onSearch" />
			</span>
			<a-table :columns="columns" :data-source="page.list" rowKey="id" bordered :pagination="false"
				:loading="loading">
				<template slot="password">
					{{"**************************"}}
				</template>
				<template slot="header" slot-scope="text">
					<a-avatar :size="64" icon="user" :src="text" />
				</template>
				<template slot="loginTime" slot-scope="text">
					<a-tag v-if="text === null" color="#f50">
						未登录
					</a-tag>
					<span v-else>
						{{text}}
					</span>
				</template>
				<template slot="operation" slot-scope="text,record">
					<div class="editable-row-operations">
						<a-popconfirm title="你确定要删除吗？" ok-text="是的" cancel-text="不,我考虑一下" @confirm="deleteAdmin(record.id)">
							<a-button :loading="deleteLoading" type="danger">
								删除
							</a-button>
						</a-popconfirm>
					</div>
				</template>
			</a-table>
			<a-pagination v-model="page.currentPage" :page-size-options="['5','10','20','50']" :total="page.totalCount"
				show-size-changer :page-size="page.pageSize" @showSizeChange="onSizeChange" @change="onPageChange">
			</a-pagination>
		</a-card>
		<!-- 修改对话框 -->
		<a-modal v-model="addModalVisable" title="添加管理员" :footer="false">
			<add-form @close="closeAddModal"></add-form>
		</a-modal>
	</div>
</template>

<script>
	import {adminColumns as columns} from '@/assets/js/tableList/UserTable.js'
	import {getAdminByPage,deleteAdmin} from '@/api/Admin.js'
	import addForm from './AdminAdd.vue'
	export default {
		name: 'AdminList',
		components: {
			addForm
		},
		data () {
			return {
				// 搜索栏
				loading: true,
				deleteLoading: false,
				columns: [],
				// 自定义分页 page
				page: {
					currentPage: 1, // 当前页
					pageSize: 5, // 每页显示条数
					totalPage: 0, // 总页数
					totalCount: 0, // 总条数
					params: {}, // 查询参数对象
					list: [], // 数据
					sortColumn: '', // 排序列
					sortMethod: 'asc' // 排序方式
				},
				// 编辑对话框
				addModalVisable: false
			}
		},
		created() {
			this.initAdmin()
		},
		mounted() {
			this.fetchAdminData()
		},
		methods: {
			initAdmin() {
				this.columns = columns
			},
			// 分页加载博客列表数据
			async fetchAdminData () {
				const {
					data: res
				} = await getAdminByPage(this.page);
				console.log(res)
				if (res.code !== 20005)
					return this.$message.error('查询出错')
				this.page = res.data
				// 消除不必要产生的查询参数
				this.page.index = undefined
				this.loading = false
				this.$message.success(res.msg)
			},
			onPageChange (newPage) {
				this.page.currentPage = newPage
				this.fetchAdminData()
			},
			// 页面变化
			onSizeChange(current, newSize) {
				this.page.pageSize = newSize;
				this.fetchAdminData()
			},
			// 删除
			async deleteAdmin (id) {
				this.deleteLoading = true
				const {data : res} = await deleteAdmin(id)
				if (res.code !== 20003)
					return this.$message.error('删除失败')
				// 基于 ajax 删除
				let arr = this.page.list
				arr.forEach((item, index, res) => {
					if (item.id == id) {
						res.splice(index,1)
					}
				})
				this.page.list = arr
				this.deleteLoading = false
				this.$message.success(res.msg)
			}, 
			// 搜索实现
			async onSearch(value) {
				// console.log(value);
				this.page.params = {
					name: value
				}
				const {
					data: res
				} = await getAdminByPage(this.page);
				// console.log(res)
				if (res.code !== 20005)
					return this.$message.error('查询出错')
				this.page = res.data
				// 消除不必要产生的查询参数
				this.page.index = undefined
				this.loading = false
				this.$message.success(res.msg)
			},
			// 修改对话框的打开
			handleAddAdmin () {
				this.addModalVisable = true
			},
			closeAddModal (val) {
				this.fetchAdminData()
				this.addModalVisable = val
			}
		}
	}
</script>

<style scoped="scoped">
	.search {
		width: 200px;
		margin-left: 10px;
	}
</style>
